<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" @onChange="handleContentChange" />
  </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, defineComponent, watch} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { compressAndConvertFileToBase64 } from '../../api/message'

export default defineComponent(
  {
    components: { Editor, Toolbar },
    props: {
      valueHtml: { type: String, default: '' },

    },
    setup(props) {
      // 编辑器实例，必须用 shallowRef
      const editorRef = shallowRef()

      // 内容 HTML
      const valueHtml = ref(props.valueHtml)
      
      

      // 模拟 ajax 异步获取内容
      onMounted(() => {
      

      })
      watch(() => props.valueHtml, (newVal) => {
        if (newVal) {
          valueHtml.value = newVal; // 当 prop 值变化时更新内部状态
          console.log('valueHtml',newVal)
        }
      }, { immediate: true }); // 添加 immediate: true 以便立即执行

      const toolbarConfig = {

      }
      
    

      const editorConfig = { placeholder: '如果是代码编辑器编辑的请切换至代码编辑器', MENU_CONF: {} };
      // toolbarConfig.excludeKeys = [
      //   'headerSelect',
      //   'italic',
      //   'group-more-style' // 排除菜单组，写菜单组 key 的值即可
      // ]

      editorConfig.MENU_CONF['uploadImage'] = {
        async customUpload(file, insertFn) {               
          // file 即选中的文件
          console.log('选中的文件', file, file.size / 1024);
          if (file.size / 1024 >= 500) {
            const compressedBase64 = await compressAndConvertFileToBase64(file);
            const url = compressedBase64;
            const alt = '图片';
            const href = compressedBase64
            insertFn(url, alt, href)
            
          } else {
            const reader = new FileReader();
            reader.readAsDataURL(file); // 读取文件为DataURL，它是一个Base64编码的字符串

            reader.onload = function (e) {
              const base64String = e.target.result;
              console.log('Base64编码的文件:', base64String);
              const url = base64String;
              const alt = '图片';
              const href = base64String
              insertFn(url, alt, href)
            };
            reader.onerror = function (error) {
              console.error('读取文件时发生错误:', error);
            };
          
          }
          
          
        }
      }

      // 组件销毁时，也及时销毁编辑器
      onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
      })

      const handleCreated = (editor) => {
        editorRef.value = editor // 记录 editor 实例，重要！
        console.log('editor',editor.children)
      }
      const handleContentChange = (editor) => {
        console.log('改变了', valueHtml.value);
       
      }
   

      return {
        editorRef,
        valueHtml,
        mode: 'default', // 或 'simple'
        toolbarConfig,
        editorConfig,
        handleCreated,
        handleContentChange,
      
       
      };
    }
  }
)
</script>